<!--
 * @Author: zhaoziyin
 * @Date: 2022-09-12 09:19:21
 * @LastEditTime: 2022-09-13 18:47:04
 * @LastEditors: zhaoziyin
 * @Description: 一直游到海水变蓝
 * @FilePath: \项目\西安\xxtx-ui\src\views\List.vue
 * 别乱动！
-->
<!--
 * @Description: 
 * @Author: charles
 * @Date: 2021-07-12 10:56:47
 * @LastEditors: LuZeng
 * @LastEditTime: 2022-09-12 00:32:25
-->
<template>
  <div>
    <Header></Header>
    <div class="content">
      <div class="wrapper">
        <div class="left">
          <div class="left_title">
            <div class="h3">
              工大要闻
              <span>当前位置: 首 页 >> 工大要闻 >> 正文</span>
            </div>
          </div>
          <div class="left_article">
            <h2>{{ news.title }}</h2>
            <div v-html="news.content"></div>
          </div>
        </div>
        <div class="right">
          <div class="right_title">
            <div class="h3">校园动态</div>
            <div class="more">更多&nbsp;+</div>
          </div>
          <div class="right_content">
            <ul v-for="i in 2" :key="i">
              <li v-for="item in rightNews" :key="item">{{item.title}}</li>
            </ul>
          </div>
          <div class="video">
            <div class="right_title">
              <div class="h3">视频新闻</div>
              <div class="more">更多&nbsp;+</div>
            </div>
            <div class="video_content">
              <ul>
                <li><img src=".././assets/yxtx/1.jpeg" alt="">
                  <p>2021年03月12日</p>
                </li>
                <li><img src=".././assets/yxtx/8.png" alt="">
                  <p>2021年06月18日</p>
                </li>
                <li><img src=".././assets/yxtx//dsxx.png" alt="">
                  <p>2021年06月04日</p>
                </li>
                <li><img src=".././assets/yxtx/project1.jpg" alt="">
                  <p>2021年05月21日</p>
                </li>
              </ul>
            </div>
            <div class="video_list">
              <ul>
                <li>▷&nbsp;&nbsp;&nbsp;2021年04月16日第1111期</li>
                <li>▷&nbsp;&nbsp;&nbsp;2021年03月26日第1110期</li>
                <li>▷&nbsp;&nbsp;&nbsp;021年1月27日第1109期</li>
                <li>▷&nbsp;&nbsp;&nbsp;2020年11月19日第1105期</li>
                <li>▷&nbsp;&nbsp;&nbsp;2020年09月04日第1101期</li>
              </ul>
            </div>
            <div class="logo">
              <img src="../../src/assets/yxtx/weibo.png" alt="" />
              <img src="../../src/assets/yxtx/num.png" alt="" />
            </div>
          </div>
        </div>
      </div>
    </div>
    <Footer></Footer>
  </div>
</template>
<script>
import { get } from "../utils/request";
export default {
  data() {
    return {
      id: 0,
      news: {},
      rightNews:[],
    };
  },
  methods: {
    async getNew() {
      let params = {
        id: this.id,
      };
      let res = await get("/index/article/findById", params);
      this.news = res.data;
      console.log(res.data);
    },
    async getRightNews(){
      let res = await get("/index/article/findHotArticles?categoryId=5")
      this.rightNews = res.data;
    },
  },
  created() {
    this.id = this.$route.query.id;
    this.getNew();
    this.getRightNews();
  },
};
</script>
<style lang="scss">
.content {
  .wrapper {
    .left {
      .left_title {
        width: 650px;
        height: 46px;
        border-bottom: 1px dashed #ccc;
        .h3 {
          line-height: 44px;
          font-size: 30px;
          color: #00468e;
          font-family: "宋体";
          span {
            float: right;
            font-size: 14px;
            color: #666;
          }
        }
      }
      .left_article {
        width: 650px;
        text-align: center;
        h2 {
          text-align: center;
        }
        div {
          .nr {
            width: 650px;
            text-align: center;
          }
          .dt {
            display: none;
          }
          .news-sp {
            display: none;
          }
          .footer {
            display: none;
          }
          img {
            width: 80%;
            margin: auto;
          }
        }
      }
    }
    width: 1000px;
    display: flex;
    justify-content: space-between;
    .right {
      width: 300px;
      height: 1200px;
      .right_title {
        width: 300px;
        height: 48px;
        display: flex;
        justify-content: space-between;
        margin: 10px 0px 0px 0px;
        line-height: 45px;
        .h3 {
          font-size: 18px;
          color: #00486e;
        }
        .more {
          font-size: 12px;
          color: #000;
        }
      }
      .right_content {
        ul {
          width: 300px;
          height: 190px;
          padding: 20px 0px;
          border-top: 1px dashed #ccc;
          li {
            list-style: disc;
            width: 280px;
            // width: 300px;
            height: 30px;
            padding: 0px 0px 0px 15px;
            overflow: hidden; //多余的部分隐藏
            white-space: nowrap; //让文字强制一行显示
            text-overflow: ellipsis; //多余的部分显示省略号
          }
        }
      }
      .video_content {
        width: 320px;
        height: 246px;
        ul {
          display: flex;
          flex-wrap: wrap;
          justify-content: space-between;
          li {
            width: 145px;
            height: 110px;
            img{
            width: 145px;
            height: 90px;
            }
          }
        }
      }
      .video_list {
        ul {
          height: 220px;
          li {
            width: 300px;
            height: 36px;
            padding: 0 0 0 30px;
          }
        }
      }
      .logo {
        img {
          width: 300px;
        }
      }
    }
  }
}
</style>